<template>
  <div>
    <CommonCard :title="'今日交易用户量'" :value="'81,014'">
      <template>
        <div
          id="total-users-chart"
          :style="{ width: '100%', height: '100%' }"
        />
      </template>
      <template v-slot:footer>
        <div class="total-users-footer">
          <span>日同比 </span>
          <span class="emphasis">8.73%</span>
          <div class="increase" />
          <span class="month">月同比 </span>
          <span class="emphasis">35.91%</span>
          <div class="decrease" />
        </div>
      </template>
    </CommonCard>
  </div>
</template>

<script>
import commonCardMixin from '../../mixins/commonCardMinxin'

export default {
  mixins: [commonCardMixin],
  mounted () {
    const chartDom = document.getElementById('total-users-chart')
    const chart = this.$echarts.init(chartDom)
    chart.setOption({
      series: [{
        type: 'bar',
        data: [200],
        stack: '总量',
        barWidth: '20%',
        itemStyle: {
          color: '#3398DB'
        }
      }, {
        type: 'bar',
        data: [230],
        stack: '总量',
        barWidth: '20%',
        itemStyle: {
          color: '#ffff00'
        }
      }, {
        type: 'custom',
        data: [200],
        stack: '总量',
        barWidth: '20%',
        renderItem: (params, api) => {
          // 自定义绘图
          console.log(params, api)
          const value = api.value(0)
          const endPoint = api.coord([value, 0])
          return {
            type: 'group',
            position: endPoint,
            children: [{
              type: 'path',
              shape: {
                // svg path 属性
                d: 'M191.814654 383.980301 832.184323 383.980301 512 767.996418Z',
                x: -5,
                y: -20,
                width: 10,
                height: 10,
                // 进行填充
                layout: 'cover'
              }
            }, {
              type: 'path',
              shape: {
                // svg path 属性
                d: 'M893.9536429999998 641.9426616666666L516.298398 235.62153966666673 132.09501599999993 639.6586416666664Z',
                x: -5,
                y: 10,
                width: 10,
                height: 10,
                layout: 'cover'
              }
            }],
            style: {
              fill: '#ccccccs'
            }
          }
        }
      }],
      xAxis: {
        type: 'value',
        show: false
      },
      yAxis: {
        type: 'category',
        show: false
      },
      grid: {
        top: 0,
        bottom: 0,
        left: 0,
        right: 0
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.total-users-footer {
  height: 100%;
  display: flex;
  .month {
    margin-left: 10px;
  }
}
</style>
